<!--
 * @Author: 'yangyuhang1203' '2621131059@qq.com'
 * @Date: 2025-09-10 11:12:04
 * @LastEditors: 'yangyuhang1203' '2621131059@qq.com'
 * @LastEditTime: 2025-09-10 14:55:22
 * @FilePath: \企业级\前端\js\对象\综合案例\综合案例.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例</title>
</head>
<body>
    <img id="light" src="OFF.gif"> <br>
    <input type="button" value="点亮" >
    <input type="button" value="熄灭" >
    <br> <br>
    <input type="text" id="name" value="BRIUP">
    <br> <br>
    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>
    <input type="button" value="全选" onclick="checkAll()">
    <input type="button" value="反选" onclick="reverse()">
    <script>
        // 任务一：点亮灯泡
        // 获取两个button的元素，修改对应的img的src的值
        var oImg = document.getElementById("light");
        // 获取所有的input取前两个
        var oInputs = document.getElementsByTagName("input");
        var oBtnOn = oInputs[0];
        var oBtnOff = oInputs[1];
        // 绑定事件
        oBtnOn.onclick = function(){
            oImg.src = "ON.gif";
        }
        oBtnOff.onclick = function(){
            oImg.src = "OFF.gif";
        }

        // 任务二：大小写转换
        // 输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写
        function lower(){//小写
        //a. 获取输入框元素对象
        var input = document.getElementById("name");
        //b. 将值转为小写
        input.value = input.value.toLowerCase();
        }
        function upper(){//大写
        //a. 获取输入框元素对象
        var input = document.getElementById("name");
        //b. 将值转为大写
        input.value = input.value.toUpperCase();
        }
        //复选框全选反选
        //获取所有复选框
        function checkAll(){
        //a. 获取所有复选框元素对象
        var hobbys = document.getElementsByName("hobby");
        //b. 设置选中状态
        for (let i = 0; i < hobbys.length; i++) {
        const element = hobbys[i];
        element.checked = true;
        }
    }
        function reverse(){
        //a. 获取所有复选框元素对象
        var hobbys = document.getElementsByName("hobby");
        //b. 设置未选中状态
        for (let i = 0; i < hobbys.length; i++) {
        const element = hobbys[i];
        if(element.checked)
        element.checked = false;
        else
        element.checked = true;
        }
    }
    </script>
</body>
    <!-- // 1. 点亮灯泡
    var oImg = document.getElementById("light");
    var oInputs = document.getElementsByTagName("input");



    // // 获取img标签的元素，修改里面src属性值
    // var oImg = document.getElementById('h1');
    // console.log(oImg.src)
    // //绑定一个点击时间
    // oImg.onclick = function(){
    //     //判断是off还是on，转换
    //     if(oImg.src.indexOf('OFF')!=-1){
    //         oImg.src = 'ON.gif';
    //     }else{
    //         oImg.src = 'OFF.gif'
    //     }
    // }
    // //2. 我们需要在原有内容后面追加红色的very good。首先需要获取原有内容，然后再进行内容的追加。
    // //获取div
    // var divs = document.getElementsByTagName('div');
    // for (let i = 0; i < divs.length; i++) {
    // const div = divs[i];
    // div.innerHTML += " <font color='red'>very good</font>";
    // }
    // //获得按钮
    // document.getElementById('all');
    // //一键全选
    // function all(){
    //     var oInputs = document.getElementsByName("hobby");
    //     oInputs.forEach(function(value){
    //         value.checked = true;
    //     });
    // } -->
<!-- </script> -->
</html>